<div class="cil__base-block">
  <img class="cil__top-image" src="assets/images/centaur/change.svg" />

  <form class="cil__base-block--form" [formGroup]="modeForm" nz-form>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="8">
        <nz-form-item>
          <nz-form-label>{{'BIZ.TERMINAL.ONBOARDING_MODE' | i18n}}</nz-form-label>
          <nz-select name="mode" formControlName="mode" (ngModelChange)="setMode($event)">
            <nz-option *ngFor="let mode of terminalModes" [nzLabel]="mode.label" [nzValue]="mode.value"></nz-option>
          </nz-select>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item>
          <nz-form-label>{{'BIZ.TERMINAL.FIRM' | i18n}}</nz-form-label>
          <nz-select name="mode" formControlName="termVendar">
            <nz-option *ngFor="let mode of termBrandOptions" [nzLabel]="mode.label" [nzValue]="mode.value"></nz-option>
          </nz-select>
        </nz-form-item>
      </div>
    </div>
  </form>

  <div *ngIf="mode === 2" class="cil__base-block--form">
    <div *ngFor="let validateForm of manualForms;let i=index;">
      <app-new-page-header [title]="computeTerminalTitle(i)" [index]="i" (addClick)="addTerminal($event)"
        (minusClick)="minusTerminal($event)"></app-new-page-header>
      <form [formGroup]="validateForm" nz-form>
        <div nz-row [nzGutter]="24">
          <div nz-col [nzSpan]="8">
            <nz-form-item>
              <nz-form-label>{{'GENERAL.TERMINAL.CODE' | i18n}}</nz-form-label>
              <nz-form-control nzHasFeedback>
                <input name="termCode" formControlName="termCode" nz-input />
                <nz-form-explain>
                  <ng-container *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('termCode'), name:'termCode'}"></ng-container>
                </nz-form-explain>
              </nz-form-control>
            </nz-form-item>
          </div>
        </div>
      </form>
    </div>
  </div>

  <form class="cil__base-block--form" [formGroup]="autoForm" nz-form *ngIf="mode === 1">
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="8">
        <nz-form-item>
          <nz-form-label>{{'BIZ.TERMINAL.QUANTITY' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback>
            <input name="count" formControlName="count" nz-input />
            <nz-form-explain>
              <ng-container *ngTemplateOutlet="errorTpl;context:{control:autoForm.get('count'), name:'count'}"></ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </form>
</div>

<ng-template #errorTpl let-control="control" let-name="name">
  <ng-container *ngIf="control.dirty">
    <ng-container *ngIf="control.hasError('required'); else second">{{ errorTips[name]?.required }}</ng-container>
    <ng-template #second>
      <ng-container *ngIf="control.hasError('maxlength'); else third">{{ errorTips[name]?.maxlength }}</ng-container>
    </ng-template>
    <ng-template #third>
      <ng-container *ngIf="control.hasError('minlength'); else fourth">{{ errorTips[name]?.minlength }}</ng-container>
    </ng-template>
    <ng-template #fourth>
      <ng-container *ngIf="control.hasError('min'); else fifth">{{ errorTips[name]?.min }}</ng-container>
    </ng-template>
    <ng-template #fifth>
      <ng-container *ngIf="control.hasError('max'); else sixth">{{ errorTips[name]?.max }}</ng-container>
    </ng-template>
    <ng-template #sixth>
      <ng-container *ngIf="control.hasError('pattern'); else seventh">{{ errorTips[name]?.pattern }}</ng-container>
    </ng-template>
    <ng-template #seventh>
      <ng-container *ngIf="control.hasError('termCodeConflicting'); else eighth">{{ errorTips[name]?.termCodeConflicting }}</ng-container>
    </ng-template>
    <ng-template #eighth>
      <ng-container *ngIf="control.hasError('isNumTaken')">{{ errorTips[name]?.isNumTaken}}</ng-container>
    </ng-template>
  </ng-container>
</ng-template>